<template>
  <nut-tabbar
    v-model="active"
    @tab-switch="tabSwitch"
    bottom
    safe-area-inset-bottom
    placeholder
  >
    <nut-tabbar-item
      v-for="(item, index) in tabList"
      :key="index"
      :tab-title="item.title"
    >
      <template #icon>
        <component :is="item.icon"></component>
      </template>
    </nut-tabbar-item>
  </nut-tabbar>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Home, Find, Cart, My } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";

const active = ref(0);
const themeVars = ref({
  // 主色调
  primaryColor: "#008000",
  primaryColorEnd: "#008000",
});

const tabList = [
  { title: "首页", icon: Home, path: "/pages/home/index" },
  { title: "分类", icon: Find, path: "/pages/cate/index" },
  { title: "购物车", icon: Cart, path: "/pages/shop/index" },
  { title: "我的", icon: My, path: "/pages/my/index" },
];
// 根据当前页面路径设置 active 值
const initActiveTab = () => {
  const currentPage = Taro.getCurrentInstance().router?.path;
  if (currentPage) {
    const index = tabList.findIndex((tab) => currentPage.includes(tab.path));
    if (index !== -1) {
      active.value = index;
    }
  }
};

onMounted(() => {
  initActiveTab();
});

const tabSwitch = (item: Record<string, unknown>, index: number) => {
  console.log(item, index);
  Taro.switchTab({
    url: tabList[index].path,
    success: () => {
      active.value = index;
      console.log("switchTab success", active.value);
    },
  });
};
</script>

<style lang="scss">
.basic-layout {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  &__content {
    flex: 1;
    overflow-y: auto;
  }
}
.basic-layout__content {
  width: 720rpx;
  background: #fff;
  margin: auto;
}
</style>
